<template>
  <span>
    <el-input
      v-bind="$attrs"
      :readonly="true"
      :disabled="!editable"
      clearable
      placeholder="请选择公司"
      class="input-with-cpy"
      v-on="$listeners">
      <el-button v-if="editable" slot="prepend" icon="el-icon-search" @click="selectCpy" />
      <treeselect
        slot="append"
        :value="orgCode"
        :options="orgSets"
        :searchable="true"
        :clearable="true"
        :disabled="!editable"
        :show-count="true"
        :disable-branch-nodes="true"
        :is-default-expanded="true"
        :normalizer="orgNormalizer"
        style="width:160px;line-height: 26px;height:26px;"
        placeholder="选择组织机构"
        @select="orgSetSelect"
      />
    </el-input>
    <custom-supply-select-list v-if="editable" ref="customSupplySelectList" :multi-select="false" :cpy-owner-type="cpyOwnerType" @customSupplySelectCallback="customSupplySelectCallback" />
  </span>
</template>

<script>
import CustomSupplySelectList from '@/views/base/customsupply/module/customSupplySelectList'
import { getAllOrgSetByCpyCode } from '@/api/system/orgSet'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: { CustomSupplySelectList, Treeselect },
  props: {
    cpyOwnerType: {
      type: String,
      default: 'custom', // custom, supply, ALL
      required: false
    },
    oriOrgCode: {
      type: String,
      default: '',
      required: false
    },
    cpyCode: {
      type: String,
      default: null,
      required: false
    },
    editable: {
      type: Boolean,
      default: true,
      required: false
    },
    paramData: {
      type: Object,
      default: null,
      required: false
    }
  },
  data() {
    return {
      orgCode: this.oriOrgCode || null,
      orgSets: []
    }
  },
  watch: {
    cpyCode: {
      handler(val) {
        if (val) {
          getAllOrgSetByCpyCode(val).then(res => {
            this.orgSets = res.data
            if (!this.orgCode && this.orgSets.length === 1) {
              this.orgCode = this.orgSets[0].orgCode
              this.$emit('orgSetSelectCallback', this.orgCode, this.paramData)
            }
          })
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    selectCpy() {
      const _this = this.$refs.customSupplySelectList
      _this.initLoadData()
    },
    customSupplySelectCallback(selectedRow, selectObj) {
      this.$emit('cpySelectCallback', selectedRow, selectObj, this.paramData)
      this.orgCode = null
      selectObj.cancel()
    },
    orgNormalizer(node) {
      return {
        id: node.orgCode,
        label: node.orgName
      }
    },
    orgSetSelect(node, instanceId) {
      this.$emit('orgSetSelectCallback', node.orgCode, this.paramData)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-input--mini .el-input__inner {
  height: 32px;
  line-height: 32px;
}
.input-with-cpy .el-input-group__append {
  padding-left: 3px;
  background-color: #fff;
}
::v-deep .vue-treeselect__control {
  line-height: 26px;
  height: 26px;
}
</style>
